<template>
  <div class="page page-header page-order-list">
    <div id="HeaderTop" class="header flex a-center jlr">
      <div class="back" v-head-back><i class="iconfont icon-arrow-left-copy"></i></div>
      <h2>我的订单</h2>
      <div class="back">&nbsp;</div>
    </div>
    <div v-skeleton-opacity="isPageLoad" class="tab-container">
      <van-tabs title-inactive-color="#666"
                title-active-color="#000"
                class="tab-status"
                :offset-top="headerHeight"
                :swipe-threshold="5"
                swipeable v-model="tabActiveIndex" sticky>
        <van-tab :key="index" v-for="(item,index) in tab" :title="item.title">
          <order-list
            :status="item.status"
            :key="index"/>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>
<script>
  import OrderList from "../../components/Order.List";
  import page_scroll from "../../mixins/save.page.scroll";
  import page from "../../mixins/page";

  export default {
    mixins: [page_scroll, page],
    name: 'PageOrderList',
    components: {OrderList},
    data() {
      return {
        tabActiveIndex: -1,
        headerHeight: 0.92 * parseInt(document.querySelector('html').style.fontSize),
        status: '',
        tab: [
          {title: '全部', status: ''},
          {title: '待付款', status: '0'},
          {title: '待收货', status: '2'},
          {title: '已完成', status: '3'},
          {title: '退款售后', status: '5'},
        ]
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        let status = to.query.status;
        if ((status ? status + '' : '') !== vm.status) {
          window.scrollTo(0, 0);
          vm.setTabIndex(status);
        } else {
          vm.isPageLoad = true;
        }
      })
    },
    beforeRouteLeave(to, from, next) {
      next(true);
      this.isPageLoad = false;
    },
    created() {
      this.setTabIndex(status);
    },
    methods: {
      setTabIndex() {
        let status = this.$route.query.status;
        this.status = status;
        this.tabActiveIndex = this.tab.findIndex(item => item.status === (status ? status + '' : ''));
        this.loadEnd();
      }
    },
    watch: {
      tabActiveIndex(newVal) {
        // 替换地址栏参数，这样刷新页面可以再次刷新到当前tab上去
        let status = this.tab.find((item, index) => index === newVal).status;
        this.status = status;
        this.$router.replace({
          path: this.$route.path,
          query: {status}
        });
      }
    },
  }
</script>
<style lang="scss">
  @import "../../assets/css/_utils.scss";

  .page-order-list {
    background-color: #fffaf8;

    .tab-container {
      position: relative;
    }

    .tab-status {
      .van-tab {
        .van-ellipsis {
          font-size: 28px;
        }

        &.van-tab--active {
          .van-ellipsis {
            font-size: 30px;
          }
        }
      }
    }
  }
</style>
